<template>
	<view class="container">
		<view class="order-tab">
			<view class="tab-item" :class="i == tab_index ? 'select' : ''" v-for="(item, i) in tabList" :key="i"
				@click="checkTab(i)">
				<text v-if="item.value == 1">{{ item.text }}</text>
				<text v-else>{{ item.text }}</text>
			</view>
		</view>
		<view class="tabs">
			<text :class="{ select: item.value == couponIndex }" class="tab-item" v-for="(item, index) in tabList1"
				:key="index" @click="chooseCoupon(item, index)">{{ item.text }}</text>
		</view>
		<view class="coupon-box">
			<view class="item" v-for="(item, i) in list" :key="i">
				<image class="bg" :src="$img_path('/course/coupon.png')" mode="scaleToFill"></image>
				<view class="c_num">
					<view class="price"> <text>￥</text>{{ item.price }} </view>
					<text>满{{ item.limit }}可用</text>
				</view>
				<view class="c_info">
					<text class="xz">{{ keys[item.type] }}</text>
					<view v-if="item.validity == 0 && item.pretype== 'appoint'" class="c_box">
						永久有效-{{item.rangetype_text}}
					</view>
					<view v-else class="c_box">
						有效期至{{ item.startdate}}-{{item.rangetype_text}}
					</view>
					<!-- <view class="time">
						仅限线上课程使用 <image :src="$img_path('/course/coupon_3.png')" mode="widthFix"></image>
					</view> -->
				</view>
				<button v-if="couponIndex == 1" class="use-btn check-btn">使用</button>
				<button v-if="couponIndex == 2" class="check-btn">已使用</button>
				<button v-if="couponIndex == 3" class="check-btn">已失效</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getUserCouponList
	} from "@/utils/api/serviceApi.js";
	import {
		getMyCouponList
	} from "@/utils/api/mallApi.js";
	import {
		coupon_lists
	} from "@/utils/api/public.js";
	import {
		timestampToDate
	} from "@/utils/utils";
	export default {
		data() {
			return {
				keys: {
					0: "平台通用券",
					1: "平台项目券",
					2: "商户通用券",
				},
				tabList: [
					// {
					// 	text: `服务优惠券`,
					// 	value: "1",
					// },
					{
						text: "商城优惠券",
						value: "2",
					},
					// {
					// 	text:'课程优惠券',
					// 	value:'3'
					// }
				],
				// 1=未使用,2=已使用,3=已失效
				tabList1: [{
						text: `未使用`,
						value: "1",
					},
					{
						text: `已使用`,
						value: "2",
					},
					{
						text: `已失效`,
						value: "3",
					},
				],
				num: 4,
				tab_index: 0,
				list: [],
				couponIndex: 1, //优惠券下标
			};
		},
		onLoad() {
			this.getCoupon();
		},
		methods: {
			timestampToDate(timestamp) {
				return timestampToDate(timestamp);
			},
			checkTab(i) {
				this.tab_index = i;
				this.getCoupon();
			},
			getCoupon() {
				this.list = [];
				// if (this.tab_index == 0) {
				// 	getUserCouponList({
				// 		state: this.couponIndex,
				// 		page: 1,
				// 	}).then((res) => {
				// 		console.log(res, "===");
				// 		this.list = res.data;
				// 	});
				// } else {
				getMyCouponList({
					state: this.couponIndex
				}).then((res) => {
					console.log(res, "===");
					this.list = res.data.data;
				});
				// }
			},
			// 选择优惠券
			chooseCoupon(item, index) {
				console.log(index);
				this.couponIndex = item.value;
				this.getCoupon();
			},
		},
	};
</script>

<style lang="scss" scoped>
	.container {
		.order-tab {
			position: sticky;
			top: 0;
			left: 0;
			right: 0;
			padding: 32rpx 22rpx 12rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #ffffff;
			z-index: 3;

			.tab-item {
				&:nth-child(2) {
					margin-left: 40rpx;
				}

				text {
					font-weight: 400;
					font-size: 32rpx;
					color: #333333;
					line-height: 44rpx;
					position: relative;
				}

				&.select {
					text {
						font-weight: bold;
						font-size: 32rpx;
						color: #e72a2a;
						line-height: 44rpx;

						&::after {
							content: "";
							width: 52rpx;
							height: 8rpx;
							background: #e72a2a;
							border-radius: 4rpx;
							position: absolute;
							top: calc(100% + 4rpx);
							left: 50%;
							transform: translateX(-50%);
						}
					}
				}
			}
		}

		.coupon-box {
			padding: 20rpx 22rpx 38rpx;
			box-sizing: border-box;

			.item {
				width: 100%;
				height: 186rpx;
				position: relative;

				&:not(:last-child) {
					margin-bottom: 30rpx;
				}

				&>image.bg {
					width: 100%;
					height: 100%;
				}

				.c_num {
					position: absolute;
					left: 40rpx;
					top: 50%;
					transform: translateY(-50%);
					display: flex;
					flex-direction: column;
					align-items: center;

					.price {
						font-weight: bold;
						font-size: 48rpx;
						color: #e72a2a;
						line-height: 66rpx;

						text {
							font-size: 30rpx;
						}
					}

					&>text {
						font-weight: 400;
						font-size: 20rpx;
						color: #666666;
						line-height: 28rpx;
						margin-top: 8rpx;
					}
				}

				.c_info {
					position: absolute;
					left: 204rpx;
					top: 50%;
					transform: translateY(-50%);
					display: flex;
					flex-direction: column;
					align-items: flex-start;

					.xz {
						font-weight: 400;
						font-size: 22rpx;
						color: #333333;
						line-height: 32rpx;
					}

					.c_box {
						font-weight: 400;
						font-size: 20rpx;
						color: #666666;
						line-height: 28rpx;
						margin-top: 6rpx;
					}

					.time {
						font-weight: 400;
						font-size: 20rpx;
						color: #e72a2a;
						line-height: 28rpx;
						margin-top: 18rpx;
						display: flex;
						align-items: center;

						image {
							width: 16.37rpx;
							height: 12rpx;
							margin-left: 15rpx;
						}
					}
				}

				.check-btn {
					position: absolute;
					right: 30rpx;
					top: 50%;
					transform: translateY(-50%);
					width: 138rpx;
					height: 48rpx;
					background: #999999;
					border-radius: 48rpx;
					font-weight: bold;
					font-size: 26rpx;
					color: #ffffff;
					line-height: 48rpx;
				}

				.use-btn {
					background-color: #ffffd1;
					color: #ff2d00;
				}
			}
		}
	}

	.tabs {
		display: flex;
		justify-content: space-between;
		padding: 0 22rpx;
		margin-top: 24rpx;

		.tab-item {
			position: relative;
		}

		.select {
			color: #ff2d00;
		}

		.select::after {
			content: "";
			width: 52rpx;
			height: 8rpx;
			background: #ff2d00;
			border-radius: 4rpx;
			position: absolute;
			top: calc(100% + 4rpx);
			left: 50%;
			transform: translateX(-50%);
		}
	}
</style>